<template>
	<div class="mine">
		<div class="top"  :style="{backgroundImage: 'url(' + cover + ')' }">
			<router-link to="mineSetting">
			<img src="/static/images/setting.png" alt="" class="setting">
			</router-link>
		</div>
		
		<div class="msg">
			<div class="whiteBg"></div>
			<img src="/static/images/bg2.jpg" alt="">
			<div class="right">
				<h3>大大大坏蛋</h3>

			<div style="position:relative;top:0.08rem;">
				<img src="/static/images/dingwei.png" alt=""> 杭州市西湖区
			</div>
			</div>
			<div class="bottom">
				<router-link to="" style="background-color:#ff5959;">
					
					<p>123456</p>
					<p class="small">咻咻</p>
				</router-link>
				<router-link to="" style="background-color:#ff8f46;">
					<p>123456</p>
					<p class="small">访客</p>
				</router-link>
			</div>
			<p class="liketitle">
				<img class="like" src="/assets/icon/like.png" alt="">有19个主播喜欢你哦 <img src="/assets/icon/right.png" class="gonext fr" alt="">
			</p>			
		</div>
		<div class="photo">
			<div class="eachTop clearfix">
				<div class="eachTop-l fl">
					<span class="color1">照片</span>
					<span class="color2">19张</span>
				</div>
				<div class="eachTop-r fr">
					<button class="btn" @click="showDel" v-if="!delBtn">编辑</button>
					<button class="btn" @click="hideDel" v-if="delBtn" style="color:red;">完成编辑</button>

					<button class="btn">上传</button>
				</div>
			</div>
			<div class="swiper-container" id="swiper">
		        <div class="swiper-wrapper">
		          <div class="swiper-slide" v-for="(item,$index) in imgList" :key="`swiper${$index}`">
		            <a v-on:click="showPreview($index,item.id)">
		              <figure class="wp-avatar banner">
		              	<i class="delate" v-if="delBtn" @click.stop.prevent="delateThis(item.id)"></i>
		                <img :src="item.img"/>
		              </figure>
		            </a>
		          </div>
		        </div>
      		</div>
		</div>

		<div class="info" v-if = "showEdit">
			<div class="eachTop clearfix">
				<div class="eachTop-l fl">
					<span class="color1">我的信息</span>
				</div>
				<div class="eachTop-r fr">
					<button class="btn" @click="isshow">编辑</button>
				</div>
			</div>
			<ul class="infoList">
				<li class="clearfix">
					<span class="info_l fl">星座</span>
					<div class="info_r fr">
						<span>{{info.age}}岁</span>
						<span>狮子座</span>
					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">来自</span>
					<div class="info_r fr">
						<span>{{info.form}}</span>
					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">职业</span>
					<div class="info_r fr">
						<span>{{info.job}}</span>
					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">爱好</span>
					<div class="info_r fr">
						<span>{{info.likes}}</span>
					</div>
				</li>
				
				<li class="clearfix">
					<span class="info_l fl">个人签名</span>
					<div class="info_r fr">
						<span>{{info.autograph}}</span>
					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">邀请码</span>
					<div class="info_r fr">
						<span>233jsh23</span>
						<button>邀请</button>
					</div>
				</li>
			</ul>
		</div>
		<div class="info" v-if="!showEdit">
			<div class="eachTop clearfix">
				<div class="eachTop-l fl">
					<span class="color1">我的信息</span>
				</div>
				<div class="eachTop-r fr">
					<button class="btn" style="color:red;" @click = "isshow">完成编辑</button>
				</div>
			</div>
			<ul class="infoList">
				<li class="clearfix">
					<span class="info_l fl">星座</span>
					<div class="info_r fr">
						<span>{{info.age}}岁</span>
						<span>{{info.constellation}}</span>
					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">来自</span>
					<div class="info_r fr">
						<input type="text" v-model=info.form>

					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">职业</span>
					<div class="info_r fr">
						<input type="text" v-model=info.job>

					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">爱好</span>
					<div class="info_r fr">
						<input type="text"  v-model=info.likes>
					</div>
				</li>
				
				<li class="clearfix">
					<span class="info_l fl">个人签名</span>
					<div class="info_r fr">
						<!-- <span>苏格拉底苏格拉底苏格拉底苏格苏格拉底苏格拉底苏格拉底</span> -->
						<textarea v-model=info.autograph> </textarea>
					</div>
				</li>
				<li class="clearfix">
					<span class="info_l fl">邀请码</span>
					<div class="info_r fr">
						<span>233jsh23</span>
						<button>邀请</button>
					</div>
				</li>
			</ul>
		</div>
		<Tabbar></Tabbar>
	</div>
</template>
<script>
import Tabbar from "./footer.vue";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  components: {
    Tabbar
  },
  data() {
    return {
      cover:
        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=881313171,1019614899&fm=26&gp=0.jpg",
      imgList: [
        {
          userName: "小泡泡",
          id: 1,
          img:
            "http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
          online: true
        },
        {
          userName: "小泡泡",
          id: 2,
          img:
            "http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
          online: true
        },
        {
          userName: "小泡泡",
          id: 3,
          img:
            "http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
          online: true
        },
        {
          userName: "小泡泡",
          id: 4,
          img:
            "http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
          online: true
        },
        {
          userName: "小泡泡",
          id: 5,
          img:
            "http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
          online: true
        }
      ],
      info: {
        age: 20,
        constellation: "狮子座",
        form: "浙江省衢州市",
        job: "教师",
        likes: "跳舞、唱歌、旅游、看电影",
        autograph: "苏格拉底苏格拉底苏格拉底苏格苏格拉底苏格拉底苏格拉底"
      },
      delBtn: false,
      showEdit: true
    };
  },
  methods: {
    showPreview(index, id) {
      console.log(id);
    },
    showDel() {
      this.delBtn = true;
    },
    hideDel() {
      this.delBtn = false;
    },
    delateThis(id) {
      console.log(id + "10086");
    },
    isshow() {
      this.showEdit = !this.showEdit;
    }
  },
  mounted() {
    let swiperObj = new Swiper("#swiper", {
      // loop: true,
      slidesPerView: 3,
      autoplay: 2000,
      paginationClickable: true,
      spaceBetween: 10,
      autoplay: false
    });
  }
};
</script>

<style>
.mine {
  /*background-color: #fff;*/
  padding-bottom: 0.5rem;
}
.mine .top {
  width: 100%;
  height: 2.7rem;
  position: relative;
  background-color: #000;
  background-size: 100% 100%;
  z-index: 1;
}
.mine .setting {
  position: absolute;
  top: 0.14rem;
  right: 0.2rem;
  width: 0.22rem;
}
.mine .msg {
  position: relative;
  z-index: 2;
  padding: 0 0.2rem;
  margin-top: -0.44rem;
  box-sizing: border-box;
  padding-bottom: 0.2rem;
  margin-bottom: 0.06rem;
}
.mine .whiteBg {
  position: absolute;
  top: 0.44rem;
  width: 100%;
  height: calc(100% - 0.44rem);
  background-color: #fff;
  z-index: -1;
  left: 0;
}
.mine .msg > img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 3px solid #fff;
}
.mine .msg h3 {
  font-size: 0.24rem;
  /*margin-bottom: 0.10rem;*/
  letter-spacing: 0.05rem;
  color: #fff;
}
.mine .msg .right {
  display: inline-block;
  font-size: 0.16rem;
  color: #808080;
  margin-left: 0.15rem;
  position: relative;
  top: 0.1rem;
}
.mine .msg .right img {
  width: 0.16rem;
}
.mine .bottom a {
  display: inline-block;
  width: 1.65rem;
  height: 0.7rem;
  padding: 0.1rem;
  border-radius: 0.04rem;
}
.mine .bottom a p {
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 0.25rem;
}
.mine .bottom a p.small {
  font-size: 0.14rem;
}
.mine .liketitle {
  margin-top: 0.2rem;
  border: 1px solid #e1e1e1;
  border-radius: 0.04rem;
  height: 0.44rem;
  line-height: 0.44rem;
  padding-left: 0.15rem;
  padding-right: 0.2rem;
  font-size: 0.14rem;
  letter-spacing: 0;
}
.mine .like {
  width: 0.225rem;
  margin-right: 0.15rem;
}
.mine .liketitle .gonext {
  width: 0.18rem;
  margin-top: 0.12rem;
}
.mine .swiper-slide {
  height: 0.9rem;
}
.mine .swiper-slide a {
  display: block;
  height: 100%;
}
.mine .wp-avatar {
  display: block;
  height: 100%;
  position: relative;
}
.mine .wp-avatar .delate {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  background-color: #fff;
  background-image: url(../../../assets/icon/delBtn.png);
  background-size: 0.28rem;
  background-position: center;
  background-repeat: no-repeat;
  top: 0.08rem;
  right: 0.08rem;
  border-radius: 50%;
}
.mine .wp-avatar img {
  display: block;
  height: 100%;
  margin: 0px auto;
}
.mine .photo {
  background-color: #fff;
  padding-bottom: 0.26rem;
  margin-bottom: 0.06rem;
}
.mine .eachTop {
  padding: 0px 0.2rem;
  height: 0.6rem;
  line-height: 0.6rem;
}
.mine .eachTop-l span {
  font-size: 0.16rem;
  display: inline-block;
  vertical-align: middle;
  line-height: 0.14rem;
  margin-right: 0.08rem;
}
.mine .eachTop-l span.color1 {
  color: #4c4c4c;
}
.mine .eachTop-l span.color2 {
  color: #808080;
}
.mine .eachTop-r button {
  margin-left: 0.08rem;
  color: #808080;
  font-size: 0.14rem;
  font-family: "微软雅黑";
}
.mine .info {
  background-color: #fff;
  padding-bottom: 0.22rem;
}
.mine .infoList {
  padding: 0rem 0.2rem;
}
.mine .infoList li {
  margin-bottom: 0.14rem;
}
.mine .infoList .info_l {
  font-size: 0.14rem;
  color: #808080;
  line-height: 0.22rem;
}
.mine .info_r {
  width: 2rem;
  text-align: right;
}
.mine .info_r span {
  font-size: 0.14rem;
  color: #4c4c4c;
  line-height: 0.22rem;
  margin-left: 0.04rem;
  display: inline-block;
  vertical-align: middle;
}
.mine .info_r input {
  font-family: "微软雅黑";
  width: 100%;
  text-align: right;
  font-size: 0.14rem;
  color: #4c4c4c;
  line-height: 0.22rem;
}
.mine .info_r textarea {
  font-family: "微软雅黑";
  width: 100%;
  font-size: 0.14rem;
  color: #4c4c4c;
  line-height: 0.22rem;
  text-align: right;
}
.mine .info_r button {
  font-size: 0.14rem;
  color: #fff;
  line-height: 0.22rem;
  margin-left: 0.04rem;
  display: inline-block;
  vertical-align: middle;
  background-color: #ff5959;
  width: 0.51rem;
  text-align: center;
  border-radius: 0.03rem;
}
</style>